<template>
  <div class="Home">
      <!-- 最大盒子开始 -->
    <div class="box">
        <!-- 头部图片开始 -->
        <div class="header">
        </div>
        <!-- 头部图片结束 -->
        <!-- 头部内容开始 -->
        <div class="headcontent">
            <div class="container">
                <div class="topper clearfix">
                    <div class="left1 fl"></div>
                    <div class="left2 fl">
                        <i></i>
                        广州
                    </div>
                    <div class="right fr">
                        <div class="right1">
                            <i></i>
                            <a href="javascript:;" v-if="!userInfo" @click="login = true">登录</a>
                            <a href="javascript:;" v-if="!userInfo" @click="login = true">立即注册</a>
                            <router-link to="/userInfo" v-if="userInfo">{{userInfo}}</router-link>
                            <a href="javascript:;" v-if="userInfo" @click="quit">退出</a>
                        </div>
                        <div class="right2">
                            <ul>
                                <router-link to="/secondHand" tag="li"><a href="javascript:;">二手房</a></router-link>
                                <router-link to="/AnewHouse" tag="li"><a href="javascript:;">新房</a></router-link>
                                <router-link tag="li" to="/rental"><a href="javascript:;">租房</a></router-link>
                                <router-link tag="li" to="Office"><a href="javascript:;">写字楼</a></router-link>
                                <router-link tag="li" to="/village"><a href="javascript:;">小区</a></router-link>
                                <li><a href="javascript:;">工具</a></li>
                                <router-link tag="li" to="/release"><a href="javascript:;">发布房源</a></router-link>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 头部内容结束 -->
        <!--中间文字内容开始 -->
       <div class="nav container">
            <div class="navicon">
            </div>
       </div>
        <!-- 中间文字内容结束 -->
        <!-- 文字轮播开始 -->
        <div class="slide container">
            <ul>
                <li>广州遇家真实租房82264套</li>
                <!-- <li>广州遇家真实租房82264套</li> -->
            </ul>
        </div>
        <!-- 文字轮播结束 -->
        <!-- 搜索框部分开始 -->
        <div class="search_box ">
            <!-- 菜单开始 -->
            <div class="meau">
                <ul class="clearfix">
                    <li :class="[{'con':indexOf == 0}]" @click="indexOf = 0"><a href="#">找二手房</a></li>
                    <li :class="[{'con':indexOf == 1}]" @click="indexOf = 1"><a href="#">找新房</a></li>
                    <li :class="[{'con':indexOf == 2}]" @click="indexOf = 2"><a href="#">找租房</a></li>
                    <li :class="[{'con':indexOf == 3}]" @click="indexOf = 3"><a href="#">找小区</a></li>
                    <li :class="[{'con':indexOf == 4}]" @click="indexOf = 4"><a href="#">搜问答</a></li>
                    <i :style="[{'left':indexOf < 2 ? 18 + indexOf*71 + 'px': 18 + indexOf*64 + 'px'}]"></i>
                </ul>
            </div>
            <!-- 菜单结束 -->
            <!-- 输入框的开始 -->
            <div class="inputbox clearfix">
                <input type="text" placeholder="请输入区域、商圈或小区名开始找房" v-model="value" @keyup.enter="push">
                <input type="text" value="开始找房">
                <a href="#">
                    <span></span>
                    地图
                </a>
            </div>
            <!-- 输入框的结束 -->
        </div>
        <!-- 搜索框部分结束 -->
        <!-- 中间内容开始 -->
        <div class="middle_content">
            <div class="container">
                <div class="titles"></div>
                <p  class="wz">集二手、新房、租房功能于一体，随时随地任性找房。IM匿名咨询让您放心，消息动态推送让您省心，服务承诺让您安心，数据百科锦囊让您感受贴心漫漫找房路，我们努力为您想更多。</p>
                <div class="download clearfix">
                    <div class="handapp fl">
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <div class="load fl">
                        <img src="../assets/image/getDownloadQr.png" class="auto-img" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间内容结束 -->
        <!-- 二手房开始 -->
        <div class="ershoufang">
            <div class="container">
                <div class="name"></div>
                <p class="nameadd clearfix">
                    好房源那么多，我们为你精选，链家网会越来越懂你
                    <span class="fr">更多广州二手房</span>
                </p>
                <ul class="classification">
                    <li>
                        <div class="wra">
                            <img src="../assets/image/2.jpg"  alt="">
                            <p class="p1">黄埔/科学城</p>
                            <p class="p2">保利洛里亚</p>
                            <p class="tips">
                                <span>3室1厅·101.23平米</span>
                                <span>参考价：<span style="font-size: 16px;">316万</span></span>
                            </p>
                            <img src="../assets/image/3.png" class="bikan" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="wra">
                            <img src="../assets/image/2.jpg"  alt="">
                            <p class="p1">黄埔/科学城</p>
                            <p class="p2">保利洛里亚</p>
                            <p class="tips">
                                <span>3室1厅·101.23平米</span>
                                <span>参考价：<span style="font-size: 16px;">316万</span></span>
                            </p>
                            <img src="../assets/image/3.png" class="bikan" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="wra">
                            <img src="../assets/image/2.jpg"  alt="">
                            <p class="p1">黄埔/科学城</p>
                            <p class="p2">保利洛里亚</p>
                            <p class="tips">
                                <span>3室1厅·101.23平米</span>
                                <span>参考价：<span style="font-size: 16px;">316万</span></span>
                            </p>
                            <img src="../assets/image/3.png" class="bikan" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="wra">
                            <img src="../assets/image/2.jpg"  alt="">
                            <p class="p1">黄埔/科学城</p>
                            <p class="p2">保利洛里亚</p>
                            <p class="tips">
                                <span>3室1厅·101.23平米</span>
                                <span>参考价：<span style="font-size: 16px;">316万</span></span>
                            </p>
                            <img src="../assets/image/3.png" class="bikan" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 二手房结束 -->
        <!-- 小区房子开始 -->
        <div class="xiaoqu-list">
            <div class="container">
                <div class="wrap">
                    <!-- 头部 -->
                    <div class="xiaoqu-header">
                        <div class="xiaoqu-header-name"></div>
                        <p class="clearfix">纵览小区，恋上这座城<span class="fr">更多广州小区</span></p>
                    </div>
                    <!-- 内容 -->
                    <div class="xiaoqu-content">
                        <ul>
                            <li>
                                <div class="xiaoqu-content-image">
                                    <img src="../assets/image/xiaoqu.jpg"  alt="">
                                </div>
                                <div class="xiaoqu-content-title">
                                    <div class="resblock-name">富力金港城东区</div>
                                    <div class="resblock-desc">
                                        <span class="desc-fl">11752元/平</span>
                                        <span class="desc-fr">1998年建</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="xiaoqu-content-image">
                                    <img src="../assets/image/xiaoqu.jpg" alt="">
                                </div>
                                <div class="xiaoqu-content-title">
                                    <div class="resblock-name">富力金港城东区</div>
                                    <div class="resblock-desc">
                                        <span class="desc-fl">11752元/平</span>
                                        <span class="desc-fr">1998年建</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="xiaoqu-content-image">
                                    <img src="../assets/image/xiaoqu.jpg" alt="">
                                </div>
                                <div class="xiaoqu-content-title">
                                    <div class="resblock-name">富力金港城东区</div>
                                    <div class="resblock-desc">
                                        <span class="desc-fl">11752元/平</span>
                                        <span class="desc-fr">1998年建</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 小区房子结束 -->
        <!-- 新房子开始 -->
        <div class="new-house">
            <div class="container">
                <div class="wrap">
                    <!-- 头部 -->
                    <div class="new-house-header">
                        <div class="new-house-header-name"></div>
                        <p class="clearfix">真实信息准确同步，楼盘动态一手掌握<span class="fr">更多广州新房</span></p>
                    </div>
                    <!-- 内容 -->
                    <div class="new-house-content">
                        <ul>
                            <li>
                                <div class="new-house-image">
                                    <img src="../assets/image/new-house.jpg" alt="">
                                </div>
                                <div class="new-house-title">万科金域曦府
                                    <div class="new-house-price">55000元/平</div>
                                </div>
                                
                            </li>
                            <li>
                                <div class="new-house-image">
                                    <img src="../assets/image/new-house.jpg" alt="">
                                </div>
                                <div class="new-house-title">万科金域曦府
                                    <div class="new-house-price">55000元/平</div>
                                </div>
                                
                            </li>
                            <li>
                                <div class="new-house-image">
                                    <img src="../assets/image/new-house.jpg" alt="">
                                </div>
                                <div class="new-house-title">万科金域曦府
                                    <div class="new-house-price">55000元/平</div>
                                </div>
                                
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新房子结束 -->

        <!-- 登录界面 -->
        <div class="login" v-show="login">
          <div class="loginContent">
            <div class="login_panel_close" @click="login = false">×</div>
            <!-- 头部信息 -->
            <div class="login_box">
              <div class="login_panel_label">
                <h2>手机快捷登录</h2>
                <div class="login_panel_hint">别担心，无账号自动注册不会导致手机号被泄露</div>
              </div>
            </div>
            <!-- 输入框 -->
            <ul class="input_box">
              <li class="phone">
                <input type="text" placeholder="请输入手机号码" v-model="phone">
              </li>
              <li class="code">
                <input type="text" placeholder="请输入短信验证码"  v-model="code">
                <span @click="getCode">获取验证码</span>
              </li>
            </ul>
            <!-- 免登录 -->
            <div class="login_remember">
              <div class="checked">
                <input type="checkbox">
                <span>7天内免登录</span>
              </div>
            </div>
            <!-- 登录按钮 -->
            <div class="btn" @click="submit">登录</div>
            <!-- 登录协议 -->
            <div class="login_type">
              <span class="change">账号密码登录</span>
              <p>登录即代表同意<span>《遇家隐私政策》</span>及<span>《遇家用户使用协议》</span></p>
            </div>
          </div>
        </div>
    </div>
    <!-- 最大盒子结束 -->
  </div>
</template>

<script>

export default {
  name: "HomeView",
  data() {
    return {
      userInfo:null,
      indexOf:0,  //搜索框指示下标
      login:false,  //登录界面的显示按钮
      code:"",  //验证码
      setCode:"",  //存储验证码
      phone:"",  //电话号码
      value:""  //输入框的值
    }
  },
  methods:{
    // 获取验证码
    getCode(){
      // 1.验证手机号码
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if(!reg.test(this.phone)){//不正确处理
        this.$message.error({
          message:"手机号码错误",
          center:true
        });
        return;
      }

      // 成功就发送验证码
      let  number = "";
      for(let i = 0;i<6;i++){
        number += parseInt(Math.random()*6 )
      }
      this.$message({
          message: number,
          type: 'success',
          center: true
      });
        // 存储验证码
      this.setCode = number;
      // number = "";

    },
    // 登录按钮
    submit(){
      let number = /^[0-9]{6}$/;
      if(!number.test(this.code) || this.setCode != this.code ){//不正确处理
        this.$message.error({
          message:"请输入正确验证码",
          center:true
        });
        return;
      }

      this.$message({
          message: "登陆成功",
          type: 'success',
          center: true
      });
      //关闭登录注册界面
      this.login = false;
      // 用户名
      this.userInfo = this.phone.substring(0,3) + "***" + this.phone.substring(this.phone.length -3);
      console.log(this.userInfo);
      window.localStorage.setItem('token',this.phone);
    },
    // 退出登录
    quit(){
      window.localStorage.removeItem("token");
      this.userInfo = null;
      this.login = false;
    },
    // 搜索框
    push(){
      // 判断不为空
      if(this.value == ""){
        return
      }
      this.$router.push({"path":"/secondHand",query:{
        value:this.value
      }})
    }
  },
  created(){
    // 判断是否有token值
    if(window.localStorage.getItem("token")){
      let phone = window.localStorage.getItem("token");
      this.userInfo = phone.substring(0,3) + "***" + phone.substring(phone.length -3);
    }
  }
};
</script>

<style lang="scss" scoped>
.Home {

  // 登录界面
  .login{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .loginContent{
      height: 475px;
      width: 380px;
      padding: 40px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 2px;
      overflow: hidden;
      box-shadow: 1px 3px 14px rgb(0 0 0 / 30%);
      position: relative;

      .login_panel_close{
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 15px;
        padding: 4px;
        font-size: 18px;
      }
      .login_box{

        .login_panel_label{
            min-height: 20px;
            line-height: 20px;
            margin-bottom: 40px;
            padding-left: 0;
            
            h2{
                font-size: 20px;
                color: #101D37;
                font-weight: bold;
            }
            .login_panel_hint{
              margin-top: 20px;
              color: #aaa;
              font-size: 14px;
              line-height: 1;
            }
        }
      }

      .input_box{
        border-radius: 2px;
        li{
          overflow: hidden;
          border: 1px solid #DBDBDB;
          color: #555;
          height: 50px;
          line-height: 50px;
          position: relative;
          margin-top: -1px;
        }
        .phone{
          border-radius: 2px 2px 0 0;

          input{
            border: 0;
            padding: 0 0 0 16px;
            height: 50px;
            width: 100%;
            box-sizing: border-box;
            line-height: 50px;
            color: #101D37;
            font-size: 14px;
            outline: none;

            &::-webkit-input-placeholder{
              color: #bbbbbb;
            }
          }
        }

        .code{
          border-radius: 0 0 2px 2px;
          display: flex;
          align-items: center;
          input{
            width: 151px;
            border: 0;
            padding: 0 0 0 16px;
            height: 50px;
            line-height: 50px;
            color: #101D37;
            font-size: 14px;
            outline: none;
            &::-webkit-input-placeholder{
              color: #bbbbbb;
            }
          }
          span{
            cursor: pointer;
            padding: 0 16px;
            border-left: 1px solid #DBDBDB;
            font-style: normal;
            font-weight: 400;
            color: #101D37;
            font-size: 14px;
            height: 20px;
            line-height: 20px;
          }
        }
      }
      .login_remember{
        color: #555;
        clear: both;
        line-height: 23px;
        margin: 24px 0;
        overflow: hidden;

        .checked{
          display: flex;
          align-items: center;
          input{
            margin: 0;
            outline: none;
            width: 16px;
            height: 16px;
            border-radius: 2px;
            margin-right: 6px;
            cursor: pointer;
            border: 1px solid #DBDBDB;
          }
          span{
            line-height: 23px;
            color: #555;
            font-size: 14px;

          }
        }
      }

      .btn{
        background: #39AC6A;
        display: block;
        width: 300px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
        border: 0;
        cursor: pointer;
        color: #FFF;
        text-align: center;
        border-radius: 2px;
        margin-top: 24px;
      }

      .login_type{
        
        .change{
          padding: 24px 0 0;
          height: 14px;
          line-height: 14px;
          display: block;
          color: #39AC6A;
          cursor: pointer;
          font-size: 14px;
        }
        p{
          margin-top: 10px;
          color: #aaa;
          font-size: 12px;
          line-height: 14px;

          span{
            color: #39AC6A;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
    }
  }


  .header {
    width: 100%;
    height: 640px;
    background: url(../assets/image/bannerV2.jpg) no-repeat 0 0 / cover;
    position: fixed;
    z-index: -1;
  }
  .headcontent {
    padding-top: 30px;
    height: 61px;
    width: 1150px;
    margin: 0 auto;
    /* background-color: aqua; */
    overflow: hidden;
    position: relative;
    z-index: 10;
  }
  .headcontent .left1 {
    width: 138px;
    height: 61px;
    // background: url(../assets/image/spriteV2_new.png) no-repeat 10px -369px;
    background: url("../assets/image/首页.png") no-repeat center center;
    background-size: 90% 90%;
    // background: url("../assets/image/logo首页.png")no-repeat 0 0 /cover;
    margin-right: 10px;
    border-radius: 5px;
    overflow: hidden;
    // box-shadow: 1px 1px 5px #ccc;
  }
  .headcontent .left2 {
    background: rgba(0, 0, 0, 0.25);
    display: inline-block;
    height: 27px;
    line-height: 27px;
    text-align: center;
    color: #fff;
    margin-top: 20px;
    cursor: pointer;
    border-radius: 15px;
    padding: 0 10px;
    font-size: 12px;
    /* width: 60px; */
    /* box-sizing: border-box; */
  }
  .headcontent .left2 > i {
    background: url(../assets/image/spriteV2_new.png) no-repeat -189px -20px;
    width: 10px;
    height: 12px;
    display: inline-block;
    position: relative;
    margin-right: 1.5px;
    top: 1px;
  }
  .headcontent .right {
    width: 428px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .headcontent .right1 {
    padding-bottom: 15px;
  }
  .headcontent .right1 > i {
    background: url(../assets/image/spriteV2_new.png);
    background-position: -203px -20px;
    width: 17px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 3px;
  }
  .headcontent .right1 > a {
    text-align: center;
    color: #fff;
    /* margin-right: 3px; */
    margin-left: 3px;
    display: inline-block;
    cursor: pointer;
    font-size: 12px;
  }
  .headcontent .right2 > ul > li {
    float: left;
  }
  .headcontent .right2 li > a {
    font-size: 16px;
    margin-left: 20px;
    font-weight: 700;

    text-shadow: 0 0 5px rgb(0 0 0 / 30%);
  }
  .nav .navicon {
    background: url(../assets/image/banner-text.png) no-repeat 0 0 / cover;
    width: 540px;
    height: 69px;
    margin: 120px 305px 0px;
  }
  .slide {
    height: 35px;
    overflow: hidden;
  }
  .slide li {
    height: 35px;
    text-align: center;
    font-size: 20px;
    line-height: 35px;
    color: #fff;
  }
  .search_box {
    padding: 20px 20px 200px 20px;
    width: 812px;
    margin: 0 auto;
  }
  .search_box > .meau > ul{
    position: relative;
  }
  .search_box > .meau > ul > li {
    float: left;
    padding-right: 20px;
    height: 43px;
  }
  .search_box > .meau > ul i{
    // border-left: 9px solid transparent;
    // border-right: 9px solid transparent;
    border: 9px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    top: 25px;
    left: 18px;
    border-bottom: 9px solid #fff;
    z-index: 9;
    transition: all 0.3s ease;
  }
  .search_box > .meau > ul > li.con>a{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
  .search_box > .meau > ul > li > a {
    color: #c3c3c4;
    font-size: 14px;
    line-height: 32px;
    font-weight: bold;
  }
  .search_box > .inputbox {
    position: relative;
  }
  .search_box > .inputbox > input:first-child {
    float: left;
    width: 646px;
    height: 55px;
    border: none;
    outline: none;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .search_box > .inputbox > input:nth-child(2) {
    float: left;
    width: 128px;
    height: 55px;
    border: none;
    outline: none;
    box-sizing: border-box;
    background-color: #00ae66;
    text-align: center;
    line-height: 53px;
    font-size: 18px;
    color: #fff;
  }
  .inputbox > a {
    position: absolute;
    top: 0;
    left: 558px;
    display: block;
    height: 55px;
    width: 50px;
    line-height: 55px;
    color: #666666;
    font-size: 16px;
    /* text-align: right; */
    font-weight: 800;
    padding-left: 30px;
  }
  .inputbox > a > span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../assets/image/1.png) no-repeat center center/cover;
    position: absolute;
    top: 16px;
    left: 0;
  }
  .middle_content {
    width: 100%;
    height: 524px;
    padding-top: 45px;
    box-sizing: border-box;
    background: url(../assets/image/bg-app.jpg) no-repeat 0 0 / cover;
  }
  .middle_content .titles {
    margin-top: 40px;
    width: 286px;
    height: 118px;
    background: url(../assets/image/spriteV2_new.png) no-repeat -446px -379px;
  }
  .middle_content .wz {
    font-size: 14px;
    line-height: 22px;
    margin-top: 22px;
    margin-bottom: 40px;
    width: 479px;
  }
  .middle_content .download .handapp > a:first-child {
    display: block;
    background: url(../assets/image/spriteV2_new.png) no-repeat -20px -139px;
    width: 134px;
    height: 44px;
  }
  .middle_content .download .handapp > a:last-child {
    display: block;
    margin-top: 14px;
    background: url(../assets/image/spriteV2_new.png) no-repeat -20px -197px;
    width: 134px;
    height: 44px;
  }
  .middle_content .download .load {
    width: 102px;
    height: 102px;
    margin-left: 14px;
  }
  .ershoufang {
    padding-top: 50px;
    height: 529px;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
  }
  .ershoufang .container .name {
    background: url(../assets/image/spriteV2_new.png) no-repeat -19px -94px;
    width: 248px;
    height: 30px;
  }
  .ershoufang .container .nameadd {
    color: #888;
    margin-top: 10px;
    font-size: 14px;
  }
  .ershoufang .container .nameadd span {
    color: #394043;
    cursor: pointer;
  }
  .ershoufang .container .classification {
    display: flex;
    justify-content: space-between;
    margin-top: 26px;
  }
  .ershoufang .container .classification li {
    width: 265px;
    height: 323px;
    /* background-color: aqua; */
  }
  .classification li > .wra {
    position: relative;
  }
  .classification li > .wra > img {
    border-radius: 4px;
    width: 265px;
    height: 205px;
    margin-bottom: 10px;
  }
  .classification li > .wra > .p1,
  .classification li > .wra > .p2 {
    font-size: 18px;
    color: #101d37;
    letter-spacing: 0;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .classification li > .wra > .tips {
    margin-top: 12px;
    position: relative;
  }
  .classification li > .wra > .tips > span:first-child {
    color: #999;
    font-size: 12px;
  }
  .classification li > .wra > .tips > span:nth-child(2) {
    position: absolute;
    right: 0;
    top: 0;
    color: #fa5741;
    font-size: 14px;
  }
  .classification li > .wra > .bikan {
    position: absolute;
    top: 0;
    left: 0;
    width: 86px;
    height: 30px;
    display: block;
  }
  .xiaoqu-list {
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    padding-top: 50px;
    background-color: #eeeef1;
  }
  .xiaoqu-list .wrap {
    height: 376px;
  }
  .xiaoqu-list .wrap .xiaoqu-header {
    height: 56px;
    width: 100%;
  }
  .xiaoqu-list .wrap .xiaoqu-header .xiaoqu-header-name {
    height: 28px;
    width: 187px;
    background: url(https://s1.ljcdn.com/feroot/pc/asset/img/home/xiaoqu-recom.png?t=2017052520523424)
      no-repeat 0 0 / cover;
  }
  .xiaoqu-list .wrap .xiaoqu-header p {
    width: 100%;
    height: 18px;
    margin-top: 10px;
    color: #888;
    font-size: 14px;
    line-height: 18px;
  }
  .xiaoqu-list .wrap .xiaoqu-header p > span {
    color: #394043;
  }
  .xiaoqu-list .wrap .xiaoqu-content {
    margin-top: 36px;
  }
  .xiaoqu-list .wrap .xiaoqu-content ul {
    display: flex;
    width: 100%;
    height: 284px;
    justify-content: space-between;
  }
  .xiaoqu-content ul li {
    height: 284px;
    width: 350px;
    background-color: #fff;
    /* 阴影 */
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  }
  .xiaoqu-content-image {
    width: 350px;
    height: 200px;
    overflow: hidden;
  }
  .xiaoqu-content-image img {
    width: 100%;
    height: 100%;
    transition: all 0.8s linear;
  }
  .xiaoqu-content-image img:hover {
    transform: scale(1.2);
  }
  .xiaoqu-content-title {
    height: 84px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .xiaoqu-content-title .resblock-name {
    padding-top: 20px;
    height: 19px;
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 19px;
  }
  .xiaoqu-content-title .resblock-desc {
    width: 100%;
    height: 14px;
    display: flex;
    justify-content: space-between;
  }
  .xiaoqu-content-title .resblock-desc .desc-fl {
    color: #394043;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
  }
  .xiaoqu-content-title .resblock-desc .desc-fr {
    color: #888c8e;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
  }
  .new-house {
    width: 100%;
    height: 472px;
    padding-top: 50px;
    box-sizing: border-box;
    background: #fff;
  }
  .new-house .new-house-header {
    height: 58px;
    width: 100%;
  }
  .new-house .new-house-header .new-house-header-name {
    background: url("../assets/image/spriteV2_new.png") no-repeat -20px -56px;
    width: 158px;
    height: 30px;
  }
  .new-house .new-house-header p {
    width: 100%;
    height: 18px;
    margin-top: 10px;
    color: #888;
    font-size: 14px;
    line-height: 18px;
  }
  .new-house .new-house-header span {
    color: #394043;
  }
  .new-house .new-house-content {
    margin-top: 36px;
  }
  .new-house .new-house-content ul {
    display: flex;
    width: 100%;
    height: 260px;
    justify-content: space-between;
  }
  .new-house .new-house-content ul li {
    width: 350px;
    height: 260px;
    position: relative;
  }
  .new-house-content ul li .new-house-image {
    width: 350px;
    height: 260px;
    overflow: hidden;
  }
  .new-house-content ul li .new-house-image img {
    width: 350px;
    height: 260px;
    transition: all 0.5s linear;
  }
  .new-house-content ul li .new-house-image img:hover {
    transform: scale(1.1);
  }
  .new-house .new-house-content ul li .new-house-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 4px rgb(0 0 0 / 60%);
  }
  .new-house-title .new-house-price {
    padding-top: 5px;
    line-height: 24px;
    color: #fff2ab;
    font-size: 20px;
    text-align: center;
    width: 100%;
  }
}
</style>
